<!DOCTYPE html>
<html>
<head th:include="vue-element :: header"></head>
<style>
    [v-cloak] {
        display: none;
    }

    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        colorName: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<body>
<div id="vm" v-cloak>
    <el-container>
        <el-main>
            <el-table :data="tableDataPrice" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
                     
                <el-table-column prop="colorName" label="颜色">
                         
                </el-table-column>
                     
                <el-table-column prop="specsName" label="规格">
                         
                </el-table-column>
                     
                <el-table-column prop="price" label="价格">
                    <template slot-scope="scope">
                        <el-input class="edit-input" type="number" size="small" v-model="scope.row.price"></el-input>
                    </template>
                         
                </el-table-column>

                <el-table-column prop="stock" label="库存">
                    <template slot-scope="scope">
                        <el-input class="edit-input" type="number" size="small" v-model="scope.row.stock"></el-input>
                    </template>
                         
                </el-table-column>
                     

                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="success" @click="confirmEdit(scope.row)" size="small"
                                   icon="el-icon-circle-check-outline">修改
                        </el-button>
                    </template>
                         
                </el-table-column>
                   
            </el-table>
        </el-main>
    </el-container>
</div>
<div th:include="vue-element :: footer"></div>
<script th:inline="javascript">
    const vm = new Vue({
        el: '#vm',
        data: {
                spanArr: [],
                productId:[[${productId}]],
                tableDataPrice:[[${productPrices}]],
                tableData6: [{
                    id: '1',
                    colorName: '红色',
                    specsName: '大众',
                    price: '234',
                }, {
                    id: '2',
                    colorName: '红色',
                    specsName: '别克',
                    price: '165',
                }, {
                    id: '3',
                    colorName: '白色',
                    specsName: '大众',
                    price: '324',
                }, {
                    id: '4',
                    colorName: '白色',
                    specsName: '别克',
                    price: '621',
                }, {
                    id: '5',
                    colorName: '白色',
                    specsName: '现代',
                    price: '539',
                }]
        },
        created: function () {
            //this.getData();
            //this.getOpenAreas();
        },
        mounted: function () {
            // 组件创建完后获取数据，
            // 此时 data 已经被 observed 了
            this.getSpanArr(this.tableDataPrice);
        },
        methods: {
            getSpanArr(data) {
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                        this.spanArr.push(1);
                        this.pos = 0
                    } else {
                        // 判断当前元素与上一个元素是否相同
                        if (data[i].colorName === data[i - 1].colorName) {
                            this.spanArr[this.pos] += 1;
                            this.spanArr.push(0);
                        } else {
                            this.spanArr.push(1);
                            this.pos = i;
                        }
                    }
                }
            },
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 0) {
                    const _row = this.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    //alert(_row);
                    //alert(_col);
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }
            },
            cancelEdit(row) {
                row.edit = false
                console.log('row', row);
            },
            confirmEdit(row) {
                row.edit = false;
                this.post("/app/product/updatePrice", row, data => {
                this.$message({
                    msg: '价格已修改',
                    type: 'success',
                    showClose: true,
                    code: 0
                });
            });
            },
            post(url, data, success, failed) {
                axios.post(url, data, {
                    headers: {'x-requested-with': 'XMLHttpRequest'}
                }).then(resp => {
                    let data = resp.data;
            })
            .catch(error => console.log(error));
            }
        }
    });
</script>
</body>
</html>